@import "../../assets/less/variable";

.filterConfig {
  flex: 1;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid @border-color-base;
    padding: 8px;

    h2 {
      flex: 1;
      font-size: 12px;
      padding-right: 8px;
    }

    ul {
      display: flex;
      flex-direction: row;

      li {
        width: 16px;
        height: 16px;
      }
    }

    i {
      font-size: 12px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-bottom: 16px;
  }

  .left {
    width: 150px;
    border: 1px solid @border-color-base;
    display: flex;
    flex-direction: column;
  }

  .center {
    border: 1px solid @border-color-base;
    border-left: none;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .right {
    border: 1px solid @border-color-base;
    border-left: none;
    width: 200px;
    display: flex;
    flex-direction: column;
  }
}

.filterList {
  flex: 1;
  display: flex;
  flex-direction: column;

  .list {
    flex: 1;
    overflow-y: auto;

    li {
      .ellipsis;

      line-height: 24px;
      padding: 0 8px;
      box-sizing: border-box;
      border-bottom: 1px solid @border-color-base;
      cursor: pointer;

      label {
        padding-left: 8px;
        cursor: pointer;
      }

      &:hover {
        background-color: lighten(@primary-color, 30%);
      }

      &.selected {
        background-color: lighten(@primary-color, 30%);
      }
    }
  }
}

.filterForm {
  flex: 1;
  display: flex;
  flex-direction: column;

  .form {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
  }

  .configItem {
    display: flex;
    align-items: center;
    border: 1px solid @border-color-base;

    .itemList {
      border-right: 1px solid @border-color-base;

      >div:nth-child(1+n) {
        border-top: 1px solid @border-color-base;
      }
    }

    .viewSet {
      border-left: 1px solid @border-color-base;
      margin-left: -1px;
    }

    .item {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }

  .configItem + .configItem {
    border-top: none;
  }
}

.filterValuePreview {
  flex: 1;
  display: flex;
  flex-direction: column;

  ul {
    overflow-y: auto;
    flex: 1;

    li {
      line-height: 24px;
      padding: 0 8px;

      .ellipsis;
    }
  }
}

.filterPanel {
  background-color: @white;
  padding: 8px 8px 0;
  margin-top: 16px;
  border-radius: 3px;

  .item {
    margin-bottom: 8px;
  }
}
